<!DOCTYPE html>
<html>
  <head>
    <title>Test entry file for "echoJsStubGenExtension"</title>
    <script type="text/javascript">
      function action() {
        var pp1 = document.getElementById('pp1');
        var pp2 = document.getElementById('pp2');
        var pp3 = document.getElementById('pp3');
        var pp4 = document.getElementById('pp4');
        var extEcho = new jsStub.echo();
        document.getElementById('pp').innerText = extEcho.readOnlyProperty;

        pp1.innerText = extEcho.writablePrefix;
        extEcho.getPrefix(function(p){pp2.innerText = p});

        extEcho.getPrefixPromise().then(function(p){
            pp3.innerText = p;
        }).catch(function() {console.log("rejected.")});
        
        pp4.innerText = extEcho.echo("Hello World!");

        // Test the writable prefix property.
        // Change writable property in JavaScript and see if it updated in Java side.
        extEcho.writablePrefix = "New prefix from Java: ";
        var echoWithNewPrefix = document.createTextNode("Echo with new prefix:" + extEcho.echo("Hello World!"));
        document.body.appendChild(echoWithNewPrefix);
        document.body.appendChild(document.createElement("br"));
        document.body.appendChild(document.createElement("br"));

        // Test events.
        onHandler = function(e) {
          var eData = document.createTextNode("onHandler Event data:" + JSON.stringify(e));
          document.body.appendChild(eData);
          document.body.appendChild(document.createElement("br"));
          document.body.appendChild(document.createElement("br"));
        };

        addHandler = function(e) {
          var eData = document.createTextNode("addEventListener, Event data:" + JSON.stringify(e));
          document.body.appendChild(eData);
          document.body.appendChild(document.createElement("br"));
          document.body.appendChild(document.createElement("br"));
        };

        // Set handlers.
        extEcho.onclick = onHandler; 
        extEcho.onupdatePrefix = onHandler;
        extEcho.onnewStudent = onHandler;
        extEcho.addEventListener("click", addHandler);
        extEcho.addEventListener("newStudent", addHandler);
        extEcho.addEventListener("updatePrefix", function(e){
          // Delete self in the handlers.
          console.log("The self deleting handle:" + JSON.stringify(e));

          // Test the feature: property updated by Java will notify JS.
          var updatedReadOnlyProperty = document.createTextNode("Read only property updated:" + extEcho.readOnlyProperty);
          document.body.appendChild(updatedReadOnlyProperty);
          document.body.appendChild(document.createElement("br"));
          document.body.appendChild(document.createElement("br"));

          extEcho.removeEventListener("updatePrefix", arguments.callee);
          extEcho.removeEventListener("click", onHandler);
          extEcho.testEvent();
        });

        // Trigger the event in JavaScript side.
        extEcho.dispatchEvent("click", {"data": "triggered click evnt by JavaScript"});

        // Replace the onXXX handler point
        extEcho.onclick = null; 
        extEcho.onupdatePrefix = function(){};
        // Test events triggered by Java side.
        extEcho.testEvent();
      }
    </script>
  </head>
  <body>
    <div><h3>Echo extension test</h3>
      readOnlyProperty: <label id="pp">null</label><br />
      writablePrefix property: <label id="pp1">null</label><br />
      Prefix from async func: <label id="pp2">null</label><br />
      Prefix promise: <label id="pp3">null</label><br />
      Echo sync func: <label id="pp4">null</label><br />
    </div>
    <button type="button" onclick="action()">Action</button>
    <div>Test Events:</div>
  </body>
</html>
